<template>
  <div class="title">
    {{ tabsProvider.tabs[tabsProvider.selectedIndex].props.title }}
  </div>
  <div class="content">
    <slot />
  </div>
  <div class="icon">
    <component :is="tabsProvider.tabs[tabsProvider.selectedIndex].children.icon" />
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      tabsProvider: {
        selectedIndex: 0,
        tabs: [],
        count: 0
      }
    }
  },
  // provide: () => ({
  //   $tabsProvider: this.tabsProvider
  // }),
  provide() {
    return {
      $tabsProvider: this.tabsProvider
    }
  },
  created() {
    this.tabsProvider.tabs = this.$slots.default().filter((child) => child.type.name === 'Tab')
  }
})
</script>